<template>
  <div class="tab-content group-status" v-loading="loading">
    <el-scrollbar>
      <div class="top-card-container">
        <dataCard :dataArr="cardList" :code="statusCode"></dataCard>
      </div>
    </el-scrollbar>

    <div class="detail-card">
      <el-row :gutter="13">
        <el-col :md="24" :lg="12" :xl="8" v-for="(item, index) in jiTaiList" :key="index">
          <div class="card-item">
            <div class="left-statistics">
              <div class="header">
                <div class="tag">
                  <img class="tag-img" :src="tagBg" alt="" />
                  <span>{{ item.ltMachineInfo.machineName }}#</span>
                </div>
                <div class="data">
                  <div class="item">
                    <img :src="output" alt="" />
                    <span>产量：{{ parseInt(item.ltMachineInfo.theoreticalYarnWeight) }}kg</span>
                  </div>
                  <div class="item">
                    <img :src="percent" alt="" />
                    <span>效率：{{ parseFloat(item.ltMachineInfo.efcRun).toFixed(1) }}%</span>
                  </div>
                </div>
              </div>
              <div class="name"> 品种：{{ item.ltMachineInfo.materialName }} </div>
              <div class="img">
                <img :src="machine" alt="" />
                <div class="machineNo">
                  {{ item.ltMachineInfo.machineName }}
                </div>
              </div>
              <div class="bottom">
                <div class="left">
                  <el-radio-group v-model="item.groupNo" v-if="fenLeiList.length == 1">
                    <el-radio
                      v-for="(item2, index2) in item.ltMachineInfo.groupNoInfo"
                      :key="index2"
                      :value="item2.groupNo"
                      size="large"
                      @change="
                        (val) => {
                          zhuHaoClick2(val, index)
                        }
                      "
                      >{{ item2.groupNo }}
                    </el-radio>
                  </el-radio-group>

                  <!-- <div class="dot">
                    <div class="circle"></div>
                  </div> -->
                  <!-- 7 -->
                </div>

                <div class="total">
                  <div class="item green">
                    <span title="开车"></span>
                    {{ item.kaiDing }}锭
                  </div>
                  <div class="item red">
                    <span title="停车"></span>
                    {{ item.tingDing }}锭
                  </div>
                  <div class="item orange">
                    <span title="满筒"></span>
                    {{ item.mangTongDing }}锭
                  </div>
                </div>
              </div>
            </div>
            <div class="right-singleIngot">
              <div class="header">
                <div class="text">单锭信息</div>
                <span class="border"></span>
              </div>
              <div class="ingot">
                <div class="block">
                  <div
                    class="block-item"
                    :class="{
                      stop: dangDingBool !== false && value === 0,
                      full: dangDingBool !== false && value === 2
                    }"
                    v-for="(value, key) in item.realTimeDatas2"
                    :key="key"
                  >
                    {{ key }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import tagBg from '@/assets/images/device-monitor/winding-tag.png'
  import output from '@/assets/images/device-monitor/winding-data.png'
  import percent from '@/assets/images/device-monitor/winding-percent.png'
  import machine from '@/assets/images/device-monitor/winding-machine-card.png'
  import { dataRegroup } from '../../utils'
  import dataCard from '../../../businessComponents/dataCard.vue'
  import {
    getLuoTongZongLian,
    getLuoTongCBFpanDuan,
    getLuoTongZongLianCanShuJi,
    getLuoTongZhuangTaiZongLan,
    getLuoTongStatistics
  } from '@/api/shengChanJianShi'

  const props = defineProps({
    statusCode: {
      type: String,
      default: '11310'
    }
  })

  const url = window.location.href
  const cardList = ref<any[]>([])

  // 获取顶部卡片数据
  const getCardList = () => {
    getLuoTongStatistics(2).then((res: any) => {
      res.currentYarnWeight = res.theoreticalYarnWeight
      delete res.theoreticalYarnWeight
      cardList.value = dataRegroup(res)
    })
  }

  // 获取示意图卡片数据
  const fenLeiList = ref<any>([])
  const jiTaiList = ref<any>([])
  const jiTaiArr = ref<any>([])
  const canShuList = ref<any>([])
  const CBFlist = ref<any>([])
  const selectBool = ref('auto')
  const groupNo = ref(1)
  const seleIndex = ref(0)
  const seleDict = ref()
  const dangDingBool = ref(false)
  const loading = ref(false)
  const getMainCardList = () => {
    getLuoTongZhuangTaiZongLan().then((res) => {
      fenLeiList.value = res
      if (fenLeiList.value != null && fenLeiList.value.length != 0) {
        seleDict.value = fenLeiList.value[seleIndex.value]
        if (seleDict.value.value === 6) {
          huoHuDataDangDing()
        } else {
          huoHuData()
        }
      } else {
        huoHuData()
      }
    })
  }

  // 获取机台信息
  const getMachineInfo = () => {
    return new Promise((resolve) => {
      getLuoTongZongLian({
        LtRealTimeDataType: seleDict.value.value,
        GroupNo: groupNo.value
      })
        .then((res: any) => {
          selectBool.value = 'auto'
          if (url.indexOf('msszh') !== -1) {
            jiTaiArr.value = res.filter((value) => {
              return value.ltMachineInfo.machineName == '11'
            })
          } else {
            jiTaiArr.value = res
          }
          resolve(res)
        })
        .catch(() => {
          selectBool.value = 'auto'
        })
    })
  }
  // 获取参数中文集合
  const getParamList = () => {
    return new Promise((resolve) => {
      let data = {
        ltRealTimeDataType: seleDict.value.value
      }
      getLuoTongZongLianCanShuJi(data).then((res) => {
        canShuList.value = res
        resolve(res)
      })
    })
  }
  // 获取机台是否是大纱库还是细弱联
  const chargeCBF = () => {
    return new Promise((resolve) => {
      getLuoTongCBFpanDuan().then((res) => {
        CBFlist.value = res
        resolve(res)
      })
    })
  }

  // 提取公共的小数处理函数
  const processDecimalValue = (value) => {
    if (Number(value) !== Math.round(value) && !isNaN(value)) {
      return parseFloat(value).toFixed(2)
    }
    return value
  }

  const danDingData = () => {
    Promise.all([getMachineInfo()]).then(() => {
      dangDingBool.value = true

      jiTaiArr.value.forEach((value) => {
        let dingArr = {}
        if (value.ltMachineInfo != null && value.ltMachineInfo.groupNoInfo != null) {
          let itemArr = value.ltMachineInfo.groupNoInfo[0]
          if (itemArr !== undefined && itemArr !== null && itemArr.endSpindleNo !== null) {
            for (let i = itemArr.startSpindleNo - 1; i < itemArr.endSpindleNo; i++) {
              let index = i + 1
              let itemBool = false
              let manTongBool = false
              if (
                value.realTimeDatas !== null &&
                value.realTimeDatas.warning !== null &&
                value.realTimeDatas.warning.SG5016 !== undefined &&
                value.realTimeDatas.warning.SG5016 !== null
              ) {
                itemBool = value.realTimeDatas.warning.SG5016.some((val) => {
                  return index === val
                })
                manTongBool = value.realTimeDatas.满桶信号.some((val) => {
                  return index === val
                })
              }
              dingArr[index] = manTongBool === true ? 2 : itemBool === true ? 0 : 1
            }

            let allDing = 0
            value.ltMachineInfo.groupNoInfo.forEach((groupItem) => {
              allDing = groupItem.endSpindleNo - groupItem.startSpindleNo + 1 + allDing
            })
            value.allDing = allDing

            let tingDing = 0
            let kaiDing = 0
            let mangTongDing = 0
            if (
              value.realTimeDatas !== null &&
              value.realTimeDatas.warning !== null &&
              value.realTimeDatas.warning.SG5016 !== undefined &&
              value.realTimeDatas.warning.SG5016 !== null
            ) {
              tingDing = value.realTimeDatas.warning.SG5016.length
              mangTongDing = value.realTimeDatas.满桶信号.length
            }

            kaiDing = allDing - tingDing - mangTongDing

            value.tingDing = tingDing
            value.kaiDing = kaiDing
            value.mangTongDing = mangTongDing
            value.groupNo = itemArr.groupNo
            value.realTimeDatas2 = dingArr
          }
        }
      })

      jiTaiList.value = jiTaiArr.value
    })
  }

  const huoHuData = () => {
    Promise.all([getMachineInfo(), getParamList(), chargeCBF()]).then(() => {
      dangDingBool.value = false

      const shouldProcessAll = seleDict.value.value !== 4
      jiTaiArr.value.forEach((value) => {
        const cbfItem = CBFlist.value.find(
          (item) => item.machineDocumentId === value.ltMachineInfo.machineDocumentId
        )

        // 遍历实时数据的每个属性
        for (const key in value.realTimeDatas) {
          const upperKey = key.toUpperCase()
          const metaItem = canShuList.value.find((item) => upperKey === item.collectMetaCode)

          if (!metaItem) continue

          // 根据不同条件处理数据
          let shouldProcess = false
          if (shouldProcessAll) {
            shouldProcess = true
          } else if (cbfItem && cbfItem.cbfEnum === 4) {
            shouldProcess = key.indexOf('R25') !== -1
          } else {
            shouldProcess = key.indexOf('R26') !== -1
          }

          // 处理符合条件的数据
          if (shouldProcess) {
            value.realTimeDatas[metaItem.collectMetaName] = processDecimalValue(
              value.realTimeDatas[key]
            )
          }

          // 删除原始属性
          delete value.realTimeDatas[key]
        }
      })
      jiTaiList.value = jiTaiArr.value

      jiTaiList.value.forEach((value) => {
        value.realTimeDatas2 = value.realTimeDatas
      })
    })
  }

  // 赐来福
  const huoHuDataDangDing = () => {
    Promise.all([getMachineInfo(), chargeCBF()]).then(() => {
      dangDingBool.value = true

      jiTaiArr.value.forEach((value) => {
        value.realTimeDatas = null
      })
      jiTaiList.value = jiTaiArr.value

      danDingData()
    })
  }

  // 组号点击事件
  const zhuHaoClick2 = (item, index) => {
    let value = jiTaiList.value[index]

    let dingArr = {}
    let itemArr: any = {}

    value.ltMachineInfo.groupNoInfo.forEach((value) => {
      if (value.groupNo == item) {
        itemArr = value
      }
    })

    if (itemArr !== undefined && itemArr !== null && itemArr.endSpindleNo !== null) {
      for (let ii = itemArr.startSpindleNo - 1; ii < itemArr.endSpindleNo; ii++) {
        let index = ii + 1
        let itemBool = false
        let manTongBool = false
        if (
          value.realTimeDatas !== null &&
          value.realTimeDatas.warning !== null &&
          value.realTimeDatas.warning.SG5016 !== undefined &&
          value.realTimeDatas.warning.SG5016 !== null
        ) {
          itemBool = value.realTimeDatas.warning.SG5016.some((val) => {
            return index === val
          })
          manTongBool = value.realTimeDatas.满桶信号.some((val) => {
            return index === val
          })
        }
        dingArr[index] = manTongBool === true ? 2 : itemBool === true ? 0 : 1
      }
      value.groupNo = itemArr.groupNo
      value.realTimeDatas2 = dingArr
    }

    // this.selectZu = item
  }

  onMounted(() => {
    getMainCardList()
    getCardList()
  })
</script>
<style scoped lang="scss">
  .top-card-container {
    display: flex;
    margin-bottom: 20px;
  }

  .el-scrollbar {
    height: auto;
  }

  .detail-card {
    height: calc(100% - 100px);
    overflow: auto;

    .card-item {
      min-width: 410px;
      height: 220px;
      font-size: 14px;
      display: flex;
      border-radius: 8px;
      margin-left: 3px;
      margin-bottom: 20px;
      background-color: #fff;

      .left-statistics {
        flex: 28;
        position: relative;
        border-right: 1px solid #e5e5e5;

        .header {
          display: flex;
          height: 45px;
          box-sizing: border-box;
          border-bottom: 1px solid #e5e5e5;

          .tag {
            width: 49px;
            height: 29px;
            margin-top: 9px;
            position: relative;

            .tag-img {
              width: 49px;
              height: 29px;
              position: absolute;
              left: -3px;
            }
            span {
              position: absolute;
              color: #fff;
              font-size: 16px;
              top: 5px;
              left: 10px;
            }
          }

          .data {
            display: flex;
            flex: 1;
            justify-content: end;

            .item {
              color: #4f5759;
              line-height: 44px;
              margin-right: 16px;

              img {
                width: 16px;
                height: 16px;
                margin-right: 5px;
                vertical-align: text-bottom;
              }
            }
          }
        }

        .name {
          margin: 10px 0 0 16px;
          font-weight: bold;
          color: #202121;
        }

        .img {
          margin: 27px auto 0;
          width: 268px;
          height: 60px;
          position: relative;
          img {
            width: 100%;
            height: 60px;
          }
          .machineNo {
            position: relative;
            bottom: 25px;
            left: 18px;
            color: #0e82cb;
            background: #9da0a7;
            width: 16px;
            height: 16px;
            line-height: 16px;
            font-weight: 700;
            text-align: center;
            border-radius: 8px;
          }
        }

        .bottom {
          display: flex;
          width: 100%;
          color: rgba(0, 0, 0, 0.9);
          padding: 7px 19px 7px 16px;
          position: absolute;
          bottom: 0;
          box-sizing: border-box;
          justify-content: space-between;

          .left {
            display: flex;
            .dot {
              width: 16px;
              height: 16px;
              border: 1px solid #78be20;
              padding: 3px;
              border-radius: 50%;
              box-sizing: border-box;
              text-align: center;
              margin-right: 8px;
              .circle {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #78be20;
              }
            }
          }

          .total {
            display: flex;
            align-items: end;

            .item {
              margin-left: 14px;
              span {
                width: 12px;
                height: 12px;
                margin-right: 5px;
                border-radius: 50%;
                display: inline-block;
              }
            }

            .green {
              span {
                background-color: #0bc15e;
              }
            }
            .red {
              span {
                background-color: #ff2a2a;
              }
            }
            .orange {
              span {
                background-color: #f5a122;
              }
            }
          }
        }
      }

      .right-singleIngot {
        // flex: 12;
        width: 140px;
        .header {
          position: relative;
          margin: 15px 0 0 12px;
          font-size: 16px;
          color: #202121;
          font-weight: bold;

          .text {
            position: relative;
            z-index: 2;
          }
          .border {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            display: inline-block;
            width: 64px;
            height: 6px;
            background: linear-gradient(90deg, #78be20 0%, rgba(120, 190, 32, 0) 100%);
          }
        }

        .ingot {
          margin: 11px 10px;
          .block {
            display: flex;
            flex-wrap: wrap;
            .block-item {
              width: 16px;
              height: 16px;
              color: #fff;
              font-size: 12px;
              line-height: 16px;
              margin: 0 2px 10px;
              text-align: center;
              background: #0bc15e;
              &.stop {
                background: #ff2a2a;
              }
              &.full {
                background: #f5a122;
              }
            }
          }
        }
      }
    }
  }

  :deep(.el-radio--large) {
    height: 24px;
  }
</style>
